<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <!-- <input type="text" v-model="msg"> -->
        <p>当前输入{{ msg.length }}字,剩余{{ 10-msg.length }}字</p>
        <textarea cols="30" rows="10" v-model="msg"></textarea><br><br>
        <p>info:{{ info }}</p>
        <!-- <input type="text" v-model="msg"> -->
        <p>当前输入{{ info.length }}字,剩余{{ 10-info.length }}字</p>
        <textarea cols="30" rows="10" v-model="info" @input="checkLength()"></textarea><br><br>
        <p>text:{{ text }}</p>
        <!-- <input type="text" v-model="msg"> -->
        <p>当前输入{{ text.length }}字,剩余{{ 10-text.length }}字</p>
        <textarea cols="30" rows="10" v-model="textArg"></textarea>

    </div>
</body>
<script>
    /*
    - 实例内构建方式：
        new Vue({
            watch: {
                key:value
            }
        })
    - key（string）：被监视的数据变量名称或对象路径表示方式
        - 监视在vue设定中，是为一个已知的数据仓库变量进行 监控方法的定义
        - !注意! : 对象路径表示形式只能用于Vue的监视器定义时
    - value（Function|Object|Array）: 定义监视器执行方式
        - 取值 Function(newValue,oldValue) : 定义基础的数据监控方法
            + newValue 当前方法被触发时，发生变量的变化的新数据
            + newValue 当前方法被触发时，发生变量的变化的旧数据

        - 取值 Object : 定义可扩展数据监控配置
            {
                handler: Function 定义监控方法
                deep: Boolean 是否开启深度监视
                immediate: Boolean 是否开启初始化触发
            }
    - 监视器中定义的监视回调方法 this 被vue锁定在当前vue实例对象上的
    
    */
    new Vue({
        el:"#app",
        data:{
            msg:"测试变量MSG",
            info:"测试变量INFO",
            text:"测试变量text"
        },
        computed:{
            textArg:{
                get(){
                    return this.text;
                },
                set(nv){
                    if(nv.length<=10){
                        this.text = nv;
                    }
                }
            }
        },
        watch:{
            msg:function(nv,ov){
                // console.log("监视器msg",this);
                console.log(nv,ov);
                if(nv.length>10){
                    this.msg = ov;
                }
            }
        },
        methods: {
            checkLength(){
                console.log("checkLength");
                if(this.info.length>10){
                    this.info = this.info.slice(0,10);
                }
            }
        },
    })
</script>
</html>